// 导入 react 和 react-dom
import React from 'react';
// React18 写法，多了 /client
import ReactDOM from 'react-dom/client';

/* 
  React 插值表达式注意事项：
    1. 基本类型 字符串 和 数字 能直接渲染
    2. 基本类型 布尔值，undefined，null 不会渲染在页面中
    3. 复杂类型 不支持直接 渲染对象，会报错
*/

// 基本数据类型
const name = 'zs';
const age = 18;

// 对象
const car = {
  brand: '玛莎拉蒂',
};

// 数组(字符串数组)
const friends = ['张三', '李四'];

const title = (
  <>
    <h1>
      你好，我是 {name} 今年 {age} 岁了。
    </h1>
    <h2>
      对象不能直接渲染，JSON.stringify 转换成字符串显示：{JSON.stringify(car)}
    </h2>
    <h2>{car.brand}</h2>
    <h3>
      基本类型 布尔值，undefined，null 不会渲染在页面中：
      {false}
      {true}
      {undefined}
      {null}
    </h3>
    <h4>数组(字符串数组)：{friends}</h4>
  </>
);

// 渲染react元素，React18写法，先创建跟节点，再渲染
ReactDOM.createRoot(document.getElementById('root')).render(title);
